<style lang='stylus'>
  page
    height 100%
  .scroller
    width 100%
    height 100%
    overflow hidden
  .item-header
    display flex
    align-items center
  .indent
    line-height 1.6
  .title
    font-weight 600
  .add-icon
    width 100upx
    height 100upx
    line-height 100upx
    position absolute
    bottom 10px
    right 10px
    background #03a4ec
    text-align center
    border-radius 100%
  .i-swipeout-demo-item
    height 73px 
    box-sizing border-box
</style>
<template>
  <view class="content flex ft36">
    <view class="scroller flex1">
      <scroll-view
        class="scroll-view dlc-bg"
        scroll-y
        :style="{height: scrollerObj.height + 'px'}"
        @scrolltolower='scrolltolower'
        :lower-threshold='scrollerObj.lowerThreshold'
      >
        <i-swipeout 
          v-for="item in list"
          :toggle="toggle2" 
          :unclosable="true"
          :key="item.addressId"  
          i-class="i-swipeout-demo-item" 
          :operateWidth="180"
          @change="onChange">
          <view slot="content" @click="toCheck(item)">
            <view>
              <span class="">{{item.userName}}</span>
              <span class="pdl10 dlc-gray">{{item.userPhone}}</span>
              <span v-if="item.isDefault == 1" class="pdl10 dlc-warning">【默认地址】</span>
            </view>
            <view class="pdt10">{{item.province}}{{item.city}}{{item.area}}{{item.detailAddress}}</view>
          </view>
          <view slot="button" class="i-swipeout-demo-button-group flex" style="color: #fff;text-align: center;">
            <view class="i-swipeout-demo-button" style="background: #2db7f5;height:73px;line-height:73px;width:50%;" @click="toEdit(item.addressId)">编辑</view>
            <view class="i-swipeout-demo-button" style="background: #fd9da6;height:73px;line-height:73px;width:50%;" @click="isDel(item.addressId)">删除</view>
          </view>
        </i-swipeout>
        <i-load-more v-if="scrollerObj.loading || scrollerObj.isEnd" :tip="loadingTip" :loading="scrollerObj.loading" />
      </scroll-view>
      <view class="add-icon" @click="toAdd">
        <i-icon type="add" size="28" color="#fff" />
      </view>
      <i-modal title="提示" :visible="visible" @ok="toDel" @cancel="visible = false" actions="openLoading">
      <view>确定删除地址？</view>
    </i-modal>
    </view>
  </view>
</template>

<script>
  import {getAddressList,deletAddress} from '@/api';
  import LoadMore from '@/mixins/LoadMore';
  import { parseTime } from '@/utils'
  const {$Message} = require('@/wxcomponents/iview/base/index');
  export default {
    mixins: [LoadMore],
    data() {
      return {
        visible:false,
        curId:'',
        toggle2:false,
        list:[],
        check:false,
      }
    },
    methods: {
      toCheck(obj){
        if(this.check){
          uni.redirectTo({
            url:`/pagesA/reserve/index?obj=${JSON.stringify(obj)}`
          })
        }
      },
      onChange(id){
        console.log("id--------",id)
        this.toggle2 = this.toggle2 ? false : true
      },
      async fetchData() {
        const { data } = await getAddressList()
        if (data.code === 1) {
          let { records, total } = data.data
          this.list = this.list.concat(records)
          let len = this.list.length
          if (len >= total) {
            this.scrollerObj.isEnd = true
          }
        }
      },
      toEdit(id){
        this.toggle2 = false
        uni.navigateTo({
          url: `/pagesA/address/detail?addressId=${id}`
        })
      },
      toAdd(){
        this.toggle2 = false
        uni.navigateTo({
          url: `/pagesA/address/add`
        })
      },
      isDel(id){
        this.curId = id
        this.visible = true
      },
      async toDel(){
        const { data } = await deletAddress({addressId:this.curId})
        if(data.code == 1){
          this.visible = false
          this.list = []
          this.fetchData()
          $Message({
            content: '删除成功',
            type: 'success',
            duration: 2
          })
        }
      }
    },
    onLoad(query){
      if(query.check){
        this.check = true
      }
    }
  }
</script>
